<script>
import { test_banner } from "apis/test"

export default {
    data() {
        return {
            title: 'Hello',
            autoplay: true,
            interval: 1000,
            duration: 1000,
            indicatorDots: true,
            id: "",
            banners: []
        }
    },
    onLoad() {
    },
    methods: {
        goto(url) {
            // uni.navigateTo({
            //     url: url
            // })
            uni.switchTab({
                url: url
            });
        },
        get_banner() {
            test_banner((res) => {
                console.log(res);
                this.banners = res.data;
            }, () => {});
        }
    }
}
</script>

<template>
    <div>
        <swiper class="swiper" circular :indicator-dots="indicatorDots" :autoplay="autoplay" :interval="interval"
            :duration="duration">
            <swiper-item>
                <view class="swiper-item uni-bg-red">
                    <img src="/static/images/k-on-1.jpg" alt="" />
                </view>
            </swiper-item>
            <swiper-item>
                <view class="swiper-item uni-bg-green">
                    <img src="/static/images/k-on-2.jpg" alt="" />
                </view>
            </swiper-item>
            <swiper-item>
                <view class="swiper-item uni-bg-blue">
                    <img src="/static/images/k-on-3.jpg" alt="" />
                </view>
            </swiper-item>
        </swiper>
        <button type="default" @click="goto('/pages/index/index')">通过方法跳转到about页面</button>
        <button type="default" @click="get_banner">click to get banners</button>
        <div v-for="item in banners" :key="item.img">
            <img :src="item.img" width="100px" />
        </div>

    </div>
</template>

<!-- scoped 局部样式 -->
<style scoped>
.swiper {
    height: 13rem;
}

.swiper img {
    width: 100%;
    height: 100%;
}
</style>
